<template>
  <div class="register">
    <div class="top">
      <header>注册新用户</header>
      <p style="font-size: 14px">
        我有账号，去
        <router-link to="/login" style="color: #e1251b">登录</router-link>
      </p>
    </div>
    <div class="container">
      <el-form
        class="el-form-box"
        label-width="100px"
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
      >
        <el-form-item label="用户名：" prop="phone">
          <el-input
            autofocus
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
            v-model.number="ruleForm.phone"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <el-input
            placeholder="请输入验证码"
            clearable
            style="width: 388px"
            v-model="ruleForm.code"
          ></el-input>
          <el-button type="primary" plain @click="getCode"
            >获取验证码</el-button
          >
        </el-form-item>
        <el-form-item label="登录密码：" prop="pwd">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.pwd"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="enterPwd">
          <el-input
            placeholder="请输入确认密码"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.enterPwd"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="agree">
          <el-checkbox
            v-model="ruleForm.checked"
            label="同意协议并注册《尚品汇用户协议》"
          ></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="btnBox" type="primary" round @click="goRegister"
            >立即注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reqGetCode, reqUserRegister } from "@/utils/api";
// import rules from "@/utils/rules"
export default {
  name: "",
  data() {
    return {
      ruleForm: {
        phone: "",
        pwd: "",
        code: "",
        checked: false,
        enterPwd: "",
      },

      rules: {
        phone: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.ruleForm.phone)
              return callback(new Error("请输入手机号"));
            if (
              !/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/.test(
                this.ruleForm.phone
              )
            )
              return callback(new Error("手机号有误"));
            callback();
          },
        },
        code: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.ruleForm.code) return callback(new Error("请输入验证码"));
            callback();
          },
        },
        pwd: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.ruleForm.pwd) return callback(new Error("请输入密码"));
            callback();
          },
        },
        enterPwd: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.ruleForm.enterPwd)
              return callback(new Error("请输入确认密码"));
            if (this.ruleForm.pwd != this.ruleForm.enterPwd)
              return callback(new Error("两次密码输入不一致"));
            callback();
          },
        },
        agree: {
          required: true,
          trigger: ["blur", "change"],
          validator: (rule, value, callback) => {
            if (!this.ruleForm.checked)
              return callback(new Error("请同意协议"));
            callback();
          },
        },
      },
    };
  },

  methods: {
    // 获取验证码
    async getCode() {
      if (!this.ruleForm.phone)
        return this.$message({ message: "请先输入手机", type: "error" });
      let res = await reqGetCode(this.ruleForm.phone);
      try {
        this.ruleForm.code = res.data - 0;
      } catch (error) {}
    },

    // 表单验证立即注册
    goRegister() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let params = {
            phone: this.ruleForm.phone,
            password: this.ruleForm.pwd,
            code: this.ruleForm.code,
          }
          reqUserRegister(params).then((res) => {
            if(res.code == 200) {
              this.$message({message: '注册成功,页面将3秒后跳转登录页面', type: 'success'})
              setTimeout(() => this.$router.push({path: '/login'}),3000)
            } else {
              this.$message({message: res.message, type: 'error'})
            }
            console.log(res)
          }, (error) => {
            return Promise.reject(new Error(err.message))
          })
        } else {
          this.$message({message: '请按照要求填写', type: 'error'})
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.register {
  min-height: calc(100vh - 264px);
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #ccc;

  .top {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    background: #ececec;
    padding: 10px;
  }

  .container {
    display: flex;
    justify-content: center;

    .el-form-box {
      width: 600px;
      padding: 30px 0;

      .btnBox {
        width: 100%;
      }
    }
  }
}
</style>
